<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/gaokai.css">
  <link rel="stylesheet" href="./css/index.css" />
  <script src="./fonts/iconfont applestore/font_4782039_hwwb1gc3s5a/iconfont.js"></script>
  <script src="./fonts/iconfont applestore/iconfont applestore/iconfont.js"></script>
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
  <title>苹果官网22001010304-高凯</title>
</head>

<body>
  <header>
    <div class="gao_header">
      <div class="gao_title">
        <p class="text1">为你推荐</p>
        <img class="avatar" src="./images/admin.jpg">
      </div>
    </div>
  </header>
  <main>
    <div class="gao_main">
      <h2 class="title1">探索更多</h2>
      <div class="gao_container">
        <div class="feature">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-edit"></use>
          </svg>
          <div class="text-container">
            <p class="text">获取实时订单状态更新。</p>
            <p class="text a">开启通知功能，掌握最订单最新动态。</p>
          </div>
        </div>
        <div class="feature">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-pingguo"></use>
          </svg>
          <div class="text-container">
            <p class="text">打造个性化的Apple Store体验。</p>
            <p class="text a">开启“设备和服务”选项，可使用更多功能，并获得更加个性化的体验。</p>
          </div>
        </div>
        <div class="feature">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouji"></use>
          </svg>
          <div class="text-container">
            <p class="text">比较你的iPhone和新款<br>iPhone机型。</p>
            <p class="text a">查看以并排对比方式显示的尺寸、性能、摄像头和耐用性等产品信息。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="gao_promotion-container">
      <h2>Apple 精彩不错过</h2>
      <div class="gao_promotion">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="offer">
                <div class="first">
                  <img class="watch-img" src="./images/tile-feature-applecare-plus.image.large_2x.png">
                </div>
                <div class="offer-text" style="background-color: #1c93ff; color:#fff;border-radius: 0 0 20px 20px;">
                  <p class="title-a">iCloud+</p>
                  <p class="text-a">通过您的新iPad或iPhone，免费获取6个月iCloud+服务。*</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="offer">
                  <img class="watch-img" src="./images/store-card-50-applepay-202409_GEO_CN.jpg">
                <div class="offer-text" style="background-color: #f5f5f5; border-radius: 0 0 20px 20px;">
                  <p class="title-a">探索 Apple Pay的各种用法。</p>
                  <p class="text-a">请访问 apple.com.cn了解更多</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="offer">
                <img class="watch-img" src="./images/store-card-50-TAA-202310.jpg">
                <div class="offer-text" style="background-image:url(./images/store-card-50-TAA-202310.jpg); border-radius: 0 0 20px 20px;">
                  <p class="title-a">参加Apple Store零售店的免费课程。</p>
                  <p class="text-a">了解各种最新功能以及如何充分运用Apple设备。</p>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div style="height: 30px;"></div>
  </main>
  <footer>
    <div class="gao_nav">
      <ul>
        <li>
          <a href="./index.html">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tuijian"></use>
            </svg>
            <p>为你推荐</p>
          </a>
        </li>
        <li>
          <a href="./product.html">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-chanpin"></use>
            </svg>
            <p>产品</p>
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-faxian1"></use>
            </svg>
            <p>深入探索</p>
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-sousuo"></use>
            </svg>
            <p>搜索</p>
          </a>
        </li>
        <li>
          <a href="./shopping.html">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gouwudai"></use>
            </svg>
            <p>购物袋</p>
          </a>
        </li>
      </ul>
    </div>
  </footer>
</body>
<script src="./swiper/swiper-bundle.min.js"></script>
<script>
  const li = document.querySelector(".gao_nav li");

  li.addEventListener("click", function (e) {
    
  })

  var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1.5,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
</script>

</html>